<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>强化学习游戏</title>
    <script src="./lib/brain.js"></script>
    <script src="./lib/chart.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="button-group">
            <button id="startTraining">开始训练</button>
            <button id="speedUpTraining">加速训练</button>
            <button id="pauseTraining">暂停训练</button>
            <button id="resumeTraining">恢复训练</button>
            <button id="saveModel">保存模型</button>
            <button id="loadModel">加载模型</button>
            <button id="startTesting">开始测试</button>
        </div>
        
        <div class="progress-container">
            <div class="progress-info">
                <p>训练回合: <span id="episodeCount">0</span></p>
                <p>当前得分: <span id="currentScore">0</span></p>
                <p>最高得分: <span id="bestScore">0</span></p>
                <p>探索率: <span id="epsilon">1.0</span></p>
                <p>训练速度: <span id="gameSpeed">1x</span></p>
            </div>
            <div class="training-stats">
                <p>平均损失: <span id="avgLoss">0</span></p>
                <p>记忆池大小: <span id="memorySize">0</span></p>
                <p>训练次数: <span id="trainingCount">0</span></p>
            </div>
        </div>

        <canvas id="gameCanvas"></canvas>
        <div class="charts-container">
            <canvas id="lossChart"></canvas>
            <canvas id="scoreChart"></canvas>
        </div>
    </div>
    <script src="game.js"></script>
    <script src="model.js"></script>
    <script src="storage.js"></script>
    <script src="controller.js"></script>
</body>
</html> 